Adding Graphics to a Vue App with D3 — Transitions and Bar Charts

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Transition

We can use the D3 to apply transitions.

For example, we can write:

<template>
  <div id="app"></div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const t = d3.transition().duration(2000);
      d3.select("body").transition(t).style("background-color", "lightblue");
    });
  },
};
</script>

to call d3.transition to create our transition object.

Then we set the duration of it with the duration method.

2000 is in milliseconds.

Then we call the transition method with the t method to set the background color of body to lightblue in 2 seconds.

Animation

We can add animations with D3.

For instance, we can write:

<template>
  <div id="app">
    <h3>hello world</h3>
  </div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      d3.selectAll("h3")
        .transition()
        .style("font-size", "28px")
        .delay(2000)
        .duration(2000);
    });
  },
};
</script>

We get the h3 and then make the font-size 28px after 2 seconds.

Then we change the size to 28px in 2 seconds.

Drawing Charts

D3 is useful for creating charts.

We can use it to create bar charts, circle charts, pie charts, donut, charts, etc.

Bar Charts

We can create bar charts with D3.

For example, we can write:

<template>
  <div id="app">
    <div id="svgcontainer"></div>
  </div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const data = [13, 6, 11, 20, 13];

      const width = 500;
      const scaleFactor = 20;
      const barHeight = 30;

      const graph = d3
        .select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", barHeight * data.length);

      const bar = graph
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", (d, i) => {
          return "translate(0," + i * barHeight + ")";
        });
      bar
        .append("rect")
        .attr("width", (d) => {
          return d * scaleFactor;
        })
        .attr("height", barHeight - 1)
        .attr("fill", "green");

      bar
        .append("text")
        .attr("x", (d) => {
          return d * scaleFactor;
        })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text((d) => {
          return d;
        })
        .attr("fill", "red");
    });
  },
};
</script>

We sett the constants and the dimensions for our bar chart in the first few lines.

Then we create the g elements with:

const bar = graph
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", (d, i) => {
    return "translate(0," + i * barHeight + ")";
  });

to house the bars.

Next, we create the rectangles for the bar chart with:

bar
  .append("rect")
  .attr("width", (d) => {
    return d * scaleFactor;
  })
  .attr("height", barHeight - 1)
  .attr("fill", "green");

d has the number in the data array.

We multiply that by scaleFactor to get the width of the bars.

We set the height to barHeight — 1 to set the height and add a gap between the bars.

And the 'fill' is set to 'green' .

Then we add the next to the right of the bars by writing:

bar
  .append("text")
  .attr("x", (d) => {
    return d * scaleFactor;
  })
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .text((d) => {
    return d;
  })
  .attr("fill", "red");

The 'x' and 'y' attributes set the location of the text.

x comes after the bar and y is barHeight / 2 .

We also have to shift the y coordinate to that the text is aligned with the bar.

So we set the dy attribute to .35em .

Then we return the number and set that as the text with the text method.

And then we call attr with the 'fill' set to 'red' .

Conclusion

We can add transitions and bar charts with D3 into our Vue app.